<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Calculator</title>
    <meta name="description" content="Simple Calculator With Dark Mode." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/css/side_bar.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>

<div class="wrapper" >
    <div class="container" >
        <div class="header_container">
            <div class="header_left">
                <i class="fa fa-list toggle" aria-hidden="true"></i>
                <h>容量</h>
                <i class="fa fa-history" aria-hidden="true"></i>
            </div>
        </div>

        <div id="vol">
            <el-row class="input_container" v-if="input1">
                <input  class="this.input1_in date_input degree_top" type="text" name="this.input1ult" id="this.input1ult" :value=input1 readonly />
            </el-row>
            <el-row>
                <el-select class="selector" v-model="val1" clearable placeholder="请选择度量">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-row>
            <el-row class="input_container" v-if="input2">
                <input  class="degree_bot date_input" type="text" name="hisIn" id="hisIn" :value=input2 readonly />
            </el-row>
            <el-row>
                <el-select class="selector" v-model="val2" clearable placeholder="请选择度量">
                    <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-row>
            <div class="row_1 row">
                <input class="opt b3" type="button" value="%"/>
                <input class="button b3" type="button" value="CE" id="clear" @click="liveScr('CE')"/>
                <input class="button b3 del" type="button" value="delete" @click="liveScr('delete')"/>
            </div>
            <div class="row_2 row">
                <input class="button b3 digital" type="button" value="7"  @click="liveScr('7')" />
                <input class="button b3 digital" type="button" value="8" @click="liveScr('8')"/>
                <input class="button b3 digital" type="button" value="9" @click="liveScr('9')"/>
            </div>
            <div class="row_3 row">
                <input class="button b3 digital" type="button" value="4"  @click="liveScr('4')" />
                <input class="button b3 digital" type="button" value="5"@click="liveScr('5')"/>
                <input class="button b3 digital" type="button" value="6" @click="liveScr('6')"/>
            </div>
            <div class="row_4 row">
                <input class="button b3 digital" type="button" value="1"  @click="liveScr('1')" />
                <input class="button b3 digital" type="button" value="2" @click="liveScr('2')"/>
                <input class="button b3 digital" type="button" value="3"  @click="liveScr('3')"/>
            </div>
            <div class="row_5 row">
                <input class="opt b3" type="button" value="1/x"/>
                <input class="button b3" type="button" value="0"   @click="liveScr('0')"/>
                <input class="button b3" type="button" value="." @click="liveScr('.')"/>
            </div>
        </div>
        <div class="side_bar bar_close" id="sideBar">
            <div class="bar_wrapper">
                <header class="bar_head">计算器</header>
                <url class="bar_url">
                    <li class="bar_nav"><a href="/standard"><i class="fa fa-chevron-right" aria-hidden="true"></i> 标准</a></li>
                    <li class="bar_nav"><a href="/"><i class="fa fa-chevron-right" aria-hidden="true"></i> 科学</a></li>
                    <li class="bar_nav"><a href="/date"><i class="fa fa-chevron-right" aria-hidden="true"></i> 日期计算</a></li>
                </url>
                <header class="bar_head">转换器</header>
                <url class="bar_url">
                    <li class="bar_nav  nav_active"><a href="/vol"><i class="fa fa-chevron-right" aria-hidden="true"></i> 容量</a></li>
                    <li class="bar_nav"><a href="/length"><i class="fa fa-chevron-right" aria-hidden="true"></i> 长度</a></li>
                </url>
            </div>
        </div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../static/js/stack.js"></script>
<script src="../static/js/models.js"></script>
<script src="../static/js/index.js"></script>
<script src="../static/js/calculate.js"></script>
<script src="../static/js/sideBar.js"></script>
<script>
    const vol=new Vue({
        el:'#vol',
        name: "vol",
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '毫升'
                },{
                    value: '选项2',
                    label: '立方厘米'
                },{
                    value: '选项3',
                    label: '升'
                },{
                    value: '选项4',
                    label: '立方米'
                }],
                val1: '',
                options2: [{
                    value: '选项1',
                    label: '毫升'
                },{
                    value: '选项2',
                    label: '立方厘米'
                },{
                    value: '选项3',
                    label: '升'
                },{
                    value: '选项4',
                    label: '立方米'
                }],
                val2: '',
                input1:'0',
                input2:'0',
                items : [],
            }

        },
        watch:{
          val1:{
              handler(val,oldVal){
                  this.calculate();
              },
              immediate:true,//立即监听
              deep:true,//深度监视
          },
            input1:{
                handler(val,oldVal){
                    this.calculate();
                },
                immediate:true,//立即监听
                deep:true,//深度监视
            },
            val2:{
                handler(val,oldVal){
                    this.calculate();
                },
                immediate:true,//立即监听
                deep:true,//深度监视
            }
        },
        methods:{
            liveScr(val){
                if(val==='CE'){
                    this.CE();
                }else if(val==='delete'){
                    this.delete();
                }else {
                    if(this.input1==='0'){
                        this.input1=val;
                    }else{
                        this.input1+=val;
                    }
                    this.push(val);
                    this.calculate();
                }
            },
            CE(){
                this.clear();
                this.input1='0';
                this.input2='0';
            },
            delete(){
                if(!this.isEmpty()){
                    let temp= this.peek();
                    this.pop();
                    if(this.input1!=='0' && this.input1!==undefined && temp!==undefined){
                        if(this.input1.length-temp.length===0){
                            this.input1="0";
                        }else{
                            this.input1=this.input1.substring(0,this.input1.length-temp.length);
                        }
                    }
                    this.calculate();
                }
            },
            calculate(){
                if(this.val1==='' || this.val2===''){
                    return;
                }
                let cal_list={
                    '选项1':1000,
                    '选项2':1000,
                    '选项3':1,
                    '选项4':1
                };
                let t=this.input1;
                if(this.val1==='选项1' || this.val1==='选项2'){
                    t/=1000;
                }
                this.input2=t*cal_list[this.val2];
            },
            push : function (element) {
                this.items.push(element);
            },

            pop : function () {
                return this.items.pop();
            },

            peek : function () {
                return this.items[this.items.length-1];
            },

            isEmpty : function () {
                return this.items.length === 0;
            },

            size : function () {
                return this.items.length;
            },

            clear : function () {
                this.items = [];
            },
        }
    })
</script>
</html>